<template>
  <view class="vision">
    <view class="box">
      <view class="test"></view>
      <view class="box_container">
        <view class="title">测量方法:</view>
        <view class="content">
          <text>让病人躺五分钟,测量血压和脉搏</text>
          <br>
          <text>让病人站起来,站立1分钟后重复测量血压和脉搏</text>
        </view>
      </view>
      <view class="scroll">
        <uni-table border stripe emptyText="暂无更多数据" width="100%" >
          <uni-tr>
            <uni-th align="left" >体位</uni-th>
            <uni-th align="left" width="20">时间</uni-th>
            <uni-th align="left" width="50">BP</uni-th>
            <uni-th align="left" >伴随症状</uni-th>
          </uni-tr>
          <uni-tr v-for="(item,index) in state.tableData" :key="index">
            <uni-td>
              {{ item.position }}
              <view v-if="(index===0)">
                <image class="img" src="@/static/images/picture_second.png" mode="aspectFit" ></image>
              </view>
              <view v-else>
                <image class="img" src="@/static/images/picture_first.png" mode="aspectFit" ></image>
              </view>
            </uni-td>
            <uni-td>{{ item.time }}</uni-td>
            <uni-td>
              <view class="bp">
                <picker
                mode="selector"
              :range="rangeBp1"
                :value="item.bp1" 
                @change="pickerChangeBp1(index,$event.detail.value)" 
              > 
                {{'BP('+ rangeBp1[item.bp1] +')/('}}
            </picker> 
            <picker
                mode="selector"
              :range="rangeBp2"
                :value="item.bp2" 
                @change="pickerChangeBp2(index,$event.detail.value)" 
              > 
                <text>{{ rangeBp2[item.bp2]+')mmHg' }}</text>
              </picker>
              </view>
              <view class="bp">
                <picker
                mode="selector"
              :range="rangeHr"
                :value="item.hr" 
                @change="pickerChangeHr(index,$event.detail.value)" 
              > 
                <text>{{ 'HR('+rangeHr[item.hr]+')次/min' }}</text>
              </picker>
              </view>
            </uni-td> 
            <uni-td>
              <checkbox-group @change="checkboxChange(index,$event.detail.value)">
                <label class="checkBox" v-for="(check,index1) in item.checkData" :key="index1">
                  <view class="bp">
                    <checkbox :value="check.value"/>
                    <text>{{check.content}}</text>
                  </view>
                </label>
              </checkbox-group>
            </uni-td>
          </uni-tr>
        </uni-table> 
        <view class="question" v-for="(item,index) in state.questions" :key="index">
          <text>{{ item.content }}</text>
          <view class="border"></view> 
          <radio-group class="radio-group" @change="handleRadioChange(index, question,$event.target.value)">  
            <label class="radio-label" v-for="(option,index_option) in state.options" :key="option.value">  
              <radio :value="option.value" />
              <text>{{ option.label}}</text>
            </label>  
          </radio-group> 
          <view class="description">{{ item.description }}</view>
        </view>
      </view>
    </view>
      <view class="foot_box">
        <view class="foot-container">
          <text class="foot1" @tap="back">上一步</text>
          <text class="foot2">4/8</text>
          <text class="foot3" @tap="next">下一步</text>
        </view>
      </view>
  </view>
</template>

<script setup lang="ts">
import {ref,reactive,computed} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {getLowBloodPressureListApi,postLowBloodPressureApi} from '@/apis/lowBloodPressure/lowBloodPressure'
import { useMarkStore } from '@/stores/modules/mark';
const useMark = useMarkStore()
const back = ()=>{
 uni.navigateBack()
}
const state = reactive({
  questions:[],
  descriptions:'',
  options:[{value:'yes',label:'无异常'},{value:'no',label:'步伐试探,前进缓慢'}],
  tableData:[
    {
      position:'卧位',
      time:'5min',
      bp1:0,
      bp2:0,
      hr:0,
      sm:'',
      symptom:[],
      checkData:[{value:'1',content:'头晕'},{value:'2',content:'眩晕'}]
    },
    {
      position:'立位',
      time:'1min',
      bp1:0,
      bp2:0,
      hr:0,
      sm:'',
      symptom:[],
      checkData:[{value:'1',content:'头晕'},{value:'2',content:'眩晕'}]
    },
    {
      position:'立位',
      time:'3min',
      bp1:0,
      bp2:0,
      hr:0,
      sm:'',
      symptom:[],
      checkData:[{value:'1',content:'头晕'},{value:'2',content:'眩晕'}]
    }
  ],
  
})
const rangeBp1 = []
for(let i=4.0;i<=5.3;i+=0.1)
{
  let roundedValue = Math.round(i * 10) / 10;  
    rangeBp1.push(roundedValue); 
}
const pickerChangeBp1 = (index,value)=>{
  state.tableData[index].bp1=value
}
const rangeBp2 = []
for(let i=4.0;i<=5.3;i+=0.1)
{
  let roundedValue = Math.round(i * 10) / 10;  
    rangeBp2.push(roundedValue); 
}
const pickerChangeBp2 = (index,value)=>{
  state.tableData[index].bp2=value
}
const rangeHr = []
for(let i=4.0;i<=5.3;i+=0.1)
{
  let roundedValue = Math.round(i * 10) / 10;  
    rangeHr.push(roundedValue); 
}
const pickerChangeHr = (index,value)=>{
  state.tableData[index].hr=value
}
const checkboxChange = (index,value)=>{
  const totalValues = value
  console.log('我是change事件的',totalValues)
  for(let i=0;i<state.tableData[index].checkData.length;i++)
  {
    let isChecked = totalValues.includes(String(state.tableData[index].checkData[i].value))
    if(isChecked)
    {
      let n = state.tableData[index].symptom.indexOf(state.tableData[index].checkData[i].content)
      if(n===-1)
      {
        state.tableData[index].symptom.push(state.tableData[index].checkData[i].content)
      }
    }
    else{
      let m = state.tableData[index].symptom.indexOf(state.tableData[index].checkData[i].content)
      if(m>-1)
      {
        state.tableData[index].symptom.splice(m,1)
      }
    }
  }
  console.log('我是第',state.tableData[index].symptom)
}
const getBloodList =async ()=>{
  console.log('test')
  const res = await getLowBloodPressureListApi()
  console.log(res.data)
  state.questions = res.data
  if(res.code===200)
  {
    setSelected()
  }
  state.descriptions = state.questions[0].description
  console.log(state.descriptions)
}
/* const uuid = ref(0)
const uuid1 = ref(0)
const uuid2 = ref(0)
const getUuid =async ()=>{
 const res = await wx.getRandomValues({length: 12 })
 uuid.value = wx.arrayBufferToBase64(res.randomValues)
 const res1 = await wx.getRandomValues({length: 12 })
 uuid1.value = wx.arrayBufferToBase64(res.randomValues)
 uuid2.value=uuid1.value+uuid.value
 console.log('uuid:',uuid2.value)
} */
const tsHistoryLowBloodPressures=[]
const handleRadioChange = (index,question,targetValue)=>{//radio框的值改变触发回调函数
  if(targetValue==='yes')
  {
    tsHistoryLowBloodPressures[index].result=1
  }
  else{
    tsHistoryLowBloodPressures[index].result=0
  }
}
const setSelected = ()=>{
  for(let i=0;i<state.questions?.length;i++)
{
  tsHistoryLowBloodPressures.push({mark:useMark.mark,tsBaseLowBloodPressureId:state.questions[i]?.id,result:0})
}
console.log('我是tsHistoryLowBloodPressures',tsHistoryLowBloodPressures)
}
onLoad(async()=>{
 await getBloodList()
})
const tsHistoryLowBloodPressureTables = []
const next =async ()=>{//提交

  for(let i=0;i<state.tableData.length;i++)
  {
    state.tableData[i].sm = state.tableData[i].symptom.join(';');
    tsHistoryLowBloodPressureTables.push({mark:useMark.mark,sequence:i+1,bp1:rangeBp1[state.tableData[i].bp1],
      bp2:rangeBp2[state.tableData[i].bp2],hr:rangeHr[state.tableData[i].hr],symptom:state.tableData[i].sm})
  }
  let obj = {
    tsHistoryLowBloodPressures:tsHistoryLowBloodPressures,
    tsHistoryLowBloodPressureTables:tsHistoryLowBloodPressureTables
  }
  console.log(tsHistoryLowBloodPressureTables)
  console.log(tsHistoryLowBloodPressures[0])
  console.log(obj)
   const res = await postLowBloodPressureApi(obj)
   console.log(res.code)
  console.log(res.msg)
 uni.navigateTo({ url: '/pages/fallRiskList/components/calcium/calcium'}) 
}
</script>

<style lang="scss">
page {
 background-color: rgb(10,127,255);
}
.vision{
 height:100vh;
 position: relative;
 .box{
   margin: 30rpx;
   border-radius: 20rpx;
   background-color: #fff;
  height: 95%;
  .test{
    height: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
  }
  .box_container{
    background-color: rgb(240,247,255);
    margin: 25rpx;
    border-radius: 15rpx;
    .title{
      color: rgb(0,111,255);
      font-weight: bold;
      font-size: 30rpx;
      margin: 20rpx;
    }
    .content{
      padding: 10rpx;
      margin-left: 10rpx;
      line-height: 40rpx;
      font-size: 25rpx;
    }
  }
  .scroll{
    margin: 25rpx;
    font-size: 27rpx;
    .img{
      height: 100rpx;
      width:100%;
    }
    .bp{
      padding-bottom: 15rpx;
      display: flex;
    }
    .question{
      margin-top: 40rpx;
      margin-left: 25rpx;
      font-size: 27rpx;
    .border{
        height: 3rpx;
        width: 600rpx;
        background-color: #eee;
        margin-top: 20rpx;
        margin-left: 50rpx;
        margin-bottom: 10rpx;
      }
      .radio-group {   
      .radio-label {   
        padding-top: 30rpx; 
        padding-right: 90rpx; 
      }  
    }
    .description{
      color: red;
      margin-top: 25rpx;
      font-size: 25rpx;
    }
  }
}
}
.foot_box{
    position:fixed;
    bottom: 2rpx;
    height: 100rpx;
    width: 100%;
    background-color: #fff;
    .foot-container{
      margin: 15rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .foot1, .foot2, .foot3{
        font-size: 35rpx;
        color: black;
      }
      .foot2{
        text-align: center;
      }
    }
  }
}

</style>